// 【流程管理】/ 【流程设计】
import ContextMenu from '@/components/ContextMenu/index.vue'
import Designer from '@/components/Designer'
import Palette from '@/components/Palette'
import Panel from '@/components/Panel'
import Setting from '@/components/Setting'
import Toolbar from '@/components/Toolbar'
import { defaultSettings } from '@/config'
import { EditorSettings } from 'types/editor/settings'
import { computed, defineComponent, onMounted, ref } from 'vue'

// import hljs from 'highlight.js/lib/core'
// import xml from 'highlight.js/lib/languages/xml'
// import json from 'highlight.js/lib/languages/json'

// hljs.registerLanguage('xml', xml)
// hljs.registerLanguage('json', json)

const BnpmDesign = defineComponent({
  name: 'BpmnDesign',
  setup() {
    const editorSettings = ref<EditorSettings>({ ...defaultSettings })

    const processXml = ref<string | undefined>(undefined)

    const customPalette = computed<boolean>(() => editorSettings.value.paletteMode === 'custom')
    const customPenal = computed<boolean>(() => editorSettings.value.penalMode === 'custom')
    const showToolbar = computed<boolean>(() => editorSettings.value.toolbar)

    const computedClasses = computed<string>(() => {
      const baseClass = ['designer-container']
      customPalette.value && baseClass.push('designer-with-palette')
      customPenal.value && baseClass.push('designer-with-penal')
      editorSettings.value.bg === 'grid-image' && baseClass.push('designer-with-bg')
      editorSettings.value.bg === 'image' && baseClass.push('designer-with-image')

      return baseClass.join(' ')
    })

    onMounted(() => {
      document.body.addEventListener('contextmenu', function (ev) {
        ev.preventDefault()
      })
    })

    /* 组件渲染 */
    return () => (
      <div class={computedClasses.value} id="designer-container">
        {showToolbar.value && <Toolbar></Toolbar>}
        <div class="main-content">
          {customPalette.value && <Palette></Palette>}
          <Designer v-model={[processXml.value, 'xml']}></Designer>
          {customPenal.value ? <Panel></Panel> : <div class="camunda-penal" id="camunda-penal"></div>}
        </div>
        <Setting v-model={[editorSettings.value, 'settings']}></Setting>
        <ContextMenu></ContextMenu>
      </div>
    )
  }
})

export default BnpmDesign
